<template>
	<view class="menu-group">
		<!-- 我的账户 -->
		<view class="menu-item" @click="goToAccount">
			<view class="menu-left">
				<view class="icon-wrapper blue">
					<uv-icon name="account" size="40" color="#fff"></uv-icon>
				</view>
				<view class="menu-info">
					<text class="title">我的账户</text>
					<text class="subtitle">账户信息管理</text>
				</view>
			</view>
			<uv-icon name="arrow-right" size="27" color="#c8c9cc"></uv-icon>
		</view>

		<!-- 商品订单 -->
		<view class="menu-item" @click="goToOrders">
			<view class="menu-left">
				<view class="icon-wrapper purple">
					<uv-icon name="order" size="40" color="#fff"></uv-icon>
				</view>
				<view class="menu-info">
					<text class="title">商品订单</text>
					<text class="subtitle">查看全部订单</text>
				</view>
			</view>
			<uv-icon name="arrow-right" size="27" color="#c8c9cc"></uv-icon>
		</view>

		<!-- 我的地址 -->
		<view class="menu-item" @click="goToAddress">
			<view class="menu-left">
				<view class="icon-wrapper green">
					<uv-icon name="map" size="40" color="#fff"></uv-icon>
				</view>
				<view class="menu-info">
					<text class="title">我的地址</text>
					<text class="subtitle">收货地址管理</text>
				</view>
			</view>
			<uv-icon name="arrow-right" size="27" color="#c8c9cc"></uv-icon>
		</view>

		<!-- 礼品券 -->
		<view class="menu-item" @click="goToGiftCoupons">
			<view class="menu-left">
				<view class="icon-wrapper orange">
					<uv-icon name="gift" size="40" color="#fff"></uv-icon>
				</view>
				<view class="menu-info">
					<text class="title">会议礼品券</text>
					<text class="subtitle">我的礼品券</text>
				</view>
			</view>
			<uv-icon name="arrow-right" size="27" color="#c8c9cc"></uv-icon>
		</view>

		<!-- 隐私政策 -->
		<view class="menu-item">
			<view class="menu-left">
				<view class="icon-wrapper gray">
					<uv-icon name="empty-order" size="40" color="#fff"></uv-icon>
				</view>
				<view class="menu-info">
					<text class="title">隐私政策</text>
					<text class="subtitle">查看隐私条款</text>
				</view>
			</view>
			<uv-icon name="arrow-right" size="27" color="#c8c9cc"></uv-icon>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'UserMenuGroup',
		methods: {
			checkLogin() {
				if (!this.$parent.userInfo.id) {
					uni.navigateTo({
						url: '/subpkg/login_page/login_page'
					})
					return false
				}
				return true
			},
			
			goToAccount() {
				if (!this.checkLogin()) return
				uni.navigateTo({
					url: '/subpkg/profile/profile'
				})
			},
			
			goToOrders() {
				if (!this.checkLogin()) return
				uni.navigateTo({
					url: '/subpkg/order_list/order_list'
				})
			},
			
			goToAddress() {
				if (!this.checkLogin()) return
				uni.navigateTo({
					url: '/subpkg/address/address'
				})
			},
			
			goToGiftCoupons() {
				if (!this.checkLogin()) return
				uni.navigateTo({
					url: '/subpkg/gift_voucher/gift_voucher'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.menu-group {
		background: #fff;
		margin: 20rpx;
		border-radius: 16rpx;
		padding: 10rpx 0;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);

		.menu-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 24rpx 30rpx;
			position: relative;

			&:active {
				background-color: #f5f5f5;
			}

			.menu-left {
				display: flex;
				align-items: center;
				gap: 24rpx;

				.icon-wrapper {
					width: 80rpx;
					height: 80rpx;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					&.blue {
						background: linear-gradient(135deg, #3c9cff, #5dabff);
						box-shadow: 0 4rpx 12rpx rgba(60, 156, 255, 0.2);
					}

					&.purple {
						background: linear-gradient(135deg, #9c27b0, #ba68c8);
						box-shadow: 0 4rpx 12rpx rgba(156, 39, 176, 0.2);
					}

					&.green {
						background: linear-gradient(135deg, #4caf50, #81c784);
						box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.2);
					}

					&.orange {
						background: linear-gradient(135deg, #ff9a2f, #ffc107);
						box-shadow: 0 4rpx 12rpx rgba(255, 154, 47, 0.2);
					}

					&.gray {
						background: linear-gradient(135deg, #909399, #a0a3a8);
						box-shadow: 0 4rpx 12rpx rgba(144, 147, 153, 0.2);
					}
				}

				.menu-info {
					display: flex;
					flex-direction: column;
					gap: 4rpx;

					.title {
						font-size: 28rpx;
						color: #333;
						font-weight: 500;
					}

					.subtitle {
						font-size: 24rpx;
						color: #999;
					}
				}
			}
		}
	}
</style>